/*
  1. Sync input value with vue data and show it on the label(v-model 2-ways binding)
  2. Implement reset(v-on and methods)
  3. Apply transform style to the cube(computed)
*/
// 1将输入框的值与 Vue 数据同步，并在标签上显示（使用 v-model 双向绑定）
// 2实现重置功能（使用 v-on 和 methods 方法）
// 3为立方体应用变换样式（使用 computed 计算属性）

// {
//   transform: `perspective(0px)rotateX(0deg)rotateY(0deg)rotateZ(0deg)`,
// }

  const { createApp } = Vue
  
  const app = {
    data() {
      return {
        perspective: 0,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 0,
      }
    },
    methods: {
      reset() {
        this.perspective = 0
        this.rotateX = 0
        this.rotateY = 0
        this.rotateZ = 0
      }
    },
    computed: {
      transform() {
        return `perspective(${this.perspective}px)rotateX(${this.rotateX}deg)rotateY(${this.rotateY}deg)rotateZ(${this.rotateZ}deg)`
      }
    },


  }
  createApp(app).mount('#app')